// 全局样式
@import '../../../assets/scss/support';
pages{
  background-color: #f4f5f7;
}

// 顶部样式
.navs{
  width:100%;
  height:100rpx;
  line-height: 100rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background-color: #ffffff;
}

.navs-item{
 font-size: 34rpx;
 color:#666666;
}

.active{
  color:#333333;
  border-bottom: 2rpx solid #333333;
}

// 优惠券规则
.couponList{
  width:702rpx;
  padding:0 24rpx;
}

.scoll-h{
  height: 100%;
}

.couponList-item{
  width:702rpx;
  display: flex;
  flex-direction: column;
  margin-bottom:24rpx;
  .list-banner{
    width:100%;
    height:200rpx;
    display: flex;
    flex-direction: row;
  }


  
  .list-footer{
    width:662rpx;
    padding:16rpx 20rpx;
    font-size: 22rpx;
    color:#999999;
    background-color: #ffffff;
  }
  
  .list-banner-left{
    width:236rpx;
    height:200rpx;
    background: url('%ASSETS_IMG%/l-coupon-list-banner-left@2x.png') no-repeat;
    background-size: contain;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .list-banner-left-top{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    text{
      font-size: 60rpx;
      color:#ffffff;
      font-weight: 600;
    }
    .rmb{
      font-size: 30rpx;
      color:#ffffff;
    }
    .discount{
      font-size: 30rpx;
      color:#ffffff;
    }
  }
  
  .list-banner-left-bottom{
    font-size: 24rpx;
    color:#ffffff;
    margin-top:12rpx;
    font-weight: 300;
    text{
      font-weight: 300;
    }
  }
  
  .list-banner-right{
    width:466rpx;
    height:200rpx;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
  }
  
  .list-banner-right-top{
    width:422rpx;
    height:98rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding:24rpx 22rpx 18rpx;
    text-align: left;
    position: relative;
    .used{
      position: absolute;
      top:0;
      right:0;
      width:80rpx;
      height:78rpx;
    }
    .name{
      font-size: 32rpx;
      color:#333333;
      // margin-bottom:26rpx;
      line-height: 46rpx;
      @include textoverflow(1);
      max-width: 422rpx;
    }
    
    .time{
      font-size: 20rpx;
      line-height: 28rpx;
      color:#999999;
    }
  }

  .line{
    width:100%;
    height:2rpx;
    background: url('%ASSETS_IMG%/l-coupon-line@2x.png') no-repeat;
    background-size: contain;
  }
  
  
  .list-banner-right-bottom{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width:422rpx;
    height:58rpx;
    padding:0 22rpx;
    // border-top:2rpx dashed #979797;
    .information{
      font-size: 26rpx;
      color:#666666;
    }
    .up{
      background: url('%ASSETS_IMG%/l-coupon-up@2x.png') no-repeat;
      background-size: contain;
      width: 44rpx;
      height:44rpx;
    }
    .down{
      background: url('%ASSETS_IMG%/l-coupon-down@2x.png') no-repeat;
      background-size: contain;
      width: 44rpx;
      height:44rpx;
    }
  }
}

.disCoupon{
  .list-banner-left{
    background: url('%ASSETS_IMG%/l-coupon-list-banner-left-dis@2x.png?v=1') no-repeat;
  }
  .name,
  .time{
    color:#999999 !important;
  }
  .information{
    color:#cccccc !important;
  }
}

.explain{
  width:702rpx;
  height:90rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  image{
    width:44rpx;
    height:44rpx;
    margin-right:6rpx;
  }
  text{
    font-size: 30rpx;
    color:#666666;
  }
}

// 底部样式
.footer{
  position: fixed;
  left:0;
  bottom:0;
  width:702rpx;
  padding:0 24rpx;
  height:110rpx;
  background-color: #f0f1f4;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.footer-left{
  width:582rpx;
  padding:0 14rpx;
  height:70rpx;
  margin-right:24rpx;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  input{
    width:500rpx;
  }
  image{
    width:52rpx;
    height:52rpx;
  }
  .place-text{
    font-size: 30rpx;
    color:#d8d8d8;
  }
}

.footer-right{
  font-size: 34rpx;
  color:#999999;
}

// 优惠券为空的样式
.empty{
  margin:110rpx auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  image{
    width:280rpx;
    height:210rpx;
  }
  text{
    font-size: 34rpx;
    color:#999999;
    margin-top:70rpx;
  }
}

.iphoneXBottom{
  padding-bottom:64rpx;
}

.iphoneXBottom1{
  padding-bottom:170rpx;
}